<template>
  <div class="search-page">
    <!-- 店铺搜索部分 -->
    <section class="search-section shop-search">
      <div class="section-title">按店铺名搜索</div>
      <div class="search-bar">
        <input
          type="text"
          v-model="shopKeyword"
          placeholder="请输入店铺名称"
          @input="searchShops"
        />
      </div>
    </section>

    <!-- 分类搜索区域 -->
    <div class="category-row">
      <!-- 服务分类搜索部分 -->
      <section class="search-section category-section">
        <div class="section-title">按服务分类浏览</div>
        <div class="category-container">
          <div class="category-list">
            <div
              v-for="category in serviceCategories"
              :key="category.id"
              :class="[
                'category-item',
                { active: currentServiceCategory === category.id },
              ]"
              @click="searchByCategory(category)"
            >
              <img
                :src="category.icon"
                :alt="category.name"
                class="category-icon"
              />
              <span class="category-name">{{ category.name }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 活动类型搜索部分 -->
      <section class="search-section category-section">
        <div class="section-title">按活动类型浏览</div>
        <div class="category-container">
          <div class="category-list">
            <div
              v-for="type in activityTypes"
              :key="type.id"
              :class="[
                'category-item',
                { active: currentActivityType === type.id },
              ]"
              @click="searchByActivityType(type)"
            >
              <img :src="type.icon" :alt="type.name" class="category-icon" />
              <span class="category-name">{{ type.name }}</span>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- 搜索结果展示区域 -->
    <section class="search-results" ref="searchResultsRef">
      <div class="results-header">
        <div class="results-title">搜索结果</div>
        <div class="results-tabs">
          <span
            v-for="tab in resultTabs"
            :key="tab.type"
            :class="['tab-item', { active: currentTab === tab.type }]"
            @click="switchTab(tab.type)"
          >
            {{ tab.name }}
            <span class="count" v-if="tab.count">({{ tab.count }})</span>
          </span>
        </div>
      </div>

      <!-- 店铺结果 -->
      <div v-show="currentTab === 'shops'" class="result-content">
        <div v-if="shopResults.length" class="shop-results">
          <div
            v-for="shop in shopResults"
            :key="shop.shopId"
            class="shop-item"
            @click="goToShop(shop)"
          >
            <img :src="shop.shopPic" :alt="shop.shopName" class="shop-logo" />
            <div class="shop-info">
              <h3>{{ shop.shopName }}</h3>
              <div class="shop-brief">
                <span class="rating">{{ shop.rating }}分</span>
                <span class="orders">月售{{ shop.monthlyOrders }}</span>
              </div>
              <div class="shop-tags">
                <span v-for="tag in shop.tags" :key="tag" class="tag">{{
                  tag
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="empty-result">暂无相关店铺</div>
      </div>

      <!-- 服务结果 -->
      <div v-show="currentTab === 'services'" class="result-content">
        <div v-if="serviceResults.length" class="service-results">
          <div
            v-for="service in serviceResults"
            :key="service.serviceId"
            class="service-item"
            @click="goToService(service)"
          >
            <img
              :src="service.servicePic"
              :alt="service.serviceName"
              class="service-image"
            />
            <div class="service-info">
              <div class="service-name">{{ service.serviceName }}</div>
              <div class="service-shop">{{ service.shopName }}</div>
              <div class="service-bottom">
                <span class="price">¥{{ service.servicePrice }}</span>
                <span class="sales">已售{{ service.sold }}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="empty-result">暂无相关服务</div>
      </div>

      <!-- 活动结果 -->
      <div v-show="currentTab === 'activities'" class="result-content">
        <div v-if="activityResults.length" class="activity-results">
          <div
            v-for="activity in activityResults"
            :key="activity.activityId"
            class="activity-item"
            @click="goToActivity(activity)"
          >
            <img
              :src="activity.activityPic"
              :alt="activity.activityName"
              class="activity-image"
            />
            <div class="activity-info">
              <div class="activity-name">{{ activity.activityName }}</div>
              <div class="activity-shop">{{ activity.shopName }}</div>
              <div class="activity-time">
                {{ activity.activityStart }} - {{ activity.activityOver }}
              </div>
              <div class="activity-status" :class="activity.activityStatus">
                {{ activity.activityStatus }}
              </div>
            </div>
          </div>
        </div>
        <div v-else class="empty-result">暂无相关活动</div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { listShop } from "@/api/shop/shop";
import { listService } from "@/api/shop/service";
import { listActivity } from "@/api/shop/activity";
const router = useRouter();
const shopKeyword = ref("");

// 控制结果显示
const showShopResults = ref(false);
const showServiceResults = ref(false);
const showActivityResults = ref(false);
// 视角跳转至搜索结果
const searchResultsRef = ref(null);
// 滚动到搜索结果的函数
const scrollToResults = () => {
  searchResultsRef.value?.scrollIntoView({
    behavior: "smooth",
    block: "start",
  });
};
// 服务分类数据
const serviceCategories = ref([
  {
    id: 1,
    name: "按摩",
    icon: "https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/a31e0b12-14e4-4ace-837e-81c452c3b766.jpeg",
  },
  {
    id: 2,
    name: "SPA",
    icon: "https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/a31e0b12-14e4-4ace-837e-81c452c3b766.jpeg",
  },
  {
    id: 3,
    name: "刮痧",
    icon: "https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/a31e0b12-14e4-4ace-837e-81c452c3b766.jpeg",
  },
  {
    id: 4,
    name: "足疗",
    icon: "https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/a31e0b12-14e4-4ace-837e-81c452c3b766.jpeg",
  },
  {
    id: 5,
    name: "推拿",
    icon: "https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/a31e0b12-14e4-4ace-837e-81c452c3b766.jpeg",
  },
  {
    id: 6,
    name: "拔罐",
    icon: "https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/a31e0b12-14e4-4ace-837e-81c452c3b766.jpeg",
  },
]);

// 活动类型数据
const activityTypes = ref([
  {
    id: 1,
    name: "周年庆",
    icon: "src/assets/images/activity1.jpg",
  },
  {
    id: 2,
    name: "开业大吉",
    icon: "src/assets/images/activity1.jpg",
  },
  {
    id: 3,
    name: "会员日",
    icon: "src/assets/images/activity1.jpg",
  },
  {
    id: 4,
    name: "节日特惠",
    icon: "src/assets/images/activity1.jpg",
  },
]);

// 搜索结果
const shopResults = ref([]);
const serviceResults = ref([]);
const activityResults = ref([]);

// 店铺搜索
const searchShops = async () => {
  if (shopKeyword.value.trim()) {
    // 调用API搜索店铺
    const res = await listShop({
      shopName: shopKeyword.value,
      pageNum: 1,
      pageSize: 10,
    });
    shopResults.value = res.rows;
    showShopResults.value = true;
    currentTab.value = "shops"; // 自动切换到店铺标签
    updateResultCounts(); // 更新结果计数
    scrollToResults(); // 添加滚动
  } else {
    showShopResults.value = false;
    shopResults.value = [];
    updateResultCounts();
  }
};

// 按分类搜索服务
const searchByCategory = async (category) => {
  // 调用API获取该分类的服务
  const res = await listService({
    serviceCategory: category.name,
    pageNum: 1,
    pageSize: 10,
  });
  serviceResults.value = res.rows;
  showServiceResults.value = true;
  currentTab.value = "services"; // 自动切换到服务标签
  updateResultCounts(); // 更新结果计数
  scrollToResults(); // 添加滚动
  router.replace({
    query: {
      ...router.currentRoute.value.query,
      category: category.name,
    },
  });
  // router.push(`/services?category=${category.name}`)
};

// 按类型搜索活动
const searchByActivityType = async (type) => {
  // 调用API获取该类型的活动
  const res = await listActivity({
    activityCategory: type.name,
    pageNum: 1,
    pageSize: 10,
  });
  activityResults.value = res.rows;
  showActivityResults.value = true;
  currentTab.value = "activities"; // 自动切换到活动标签
  updateResultCounts(); // 更新结果计数
  scrollToResults(); // 添加滚动
  router.replace({
    query: {
      ...router.currentRoute.value.query,
      type: type.name,
    },
  });
  // router.push(`/activities?type=${type.id}`)
};
const currentTab = ref("shops");
const resultTabs = ref([
  { type: "shops", name: "店铺", count: 0 },
  { type: "services", name: "服务", count: 0 },
  { type: "activities", name: "活动", count: 0 },
]);

// 切换结果标签
const switchTab = (type) => {
  currentTab.value = type;
};

// 更新搜索结果数量
const updateResultCounts = () => {
  resultTabs.value = resultTabs.value.map((tab) => {
    switch (tab.type) {
      case "shops":
        tab.count = shopResults.value.length;
        break;
      case "services":
        tab.count = serviceResults.value.length;
        break;
      case "activities":
        tab.count = activityResults.value.length;
        break;
    }
    return tab;
  });
};
</script>

<style scoped>
.search-page {
  padding: 15px;
  background: #f5f5f5;
}

.search-section {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.section-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
}

.search-bar {
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 15px;
  border: 1px solid transparent; /* 添加透明边框 */
  transition: all 0.3s; /* 添加过渡效果 */
}

.search-bar input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none; /* 添加这行去掉点击时的边框 */
}

.search-bar:focus-within {
  background: #fff;
  border-color: #ff4d4f; /* 输入框获得焦点时显示主题色边框 */
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1); /* 添加柔和的阴影效果 */
}

.category-container {
  max-height: 160px; /* 限制容器高度 */
  overflow-y: auto;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 5px;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  width: calc(50% - 4px); /* 两列布局，减去间距 */
}

.category-item:hover {
  background: #ffeaea;
}

.category-item.active {
  background: #ff4d4f;
  color: #fff;
}

.category-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.category-name {
  font-size: 13px;
  white-space: nowrap;
}

/* 自定义滚动条样式 */
.category-container::-webkit-scrollbar {
  width: 4px;
}

.category-container::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

.category-container::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* 分类网格 */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 10px 0;
}

.category-item {
  text-align: center;
  cursor: pointer;
}

.category-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon img {
  width: 30px;
  height: 30px;
}

.category-name {
  font-size: 12px;
  color: #333;
}

/* 活动类型 */
.activity-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 10px 0;
}

.activity-type-item {
  text-align: center;
  cursor: pointer;
}

.type-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.type-icon img {
  width: 30px;
  height: 30px;
}

.type-name {
  font-size: 12px;
  color: #333;
}

/* 结果列表样式 */
.result-list {
  margin-top: 15px;
}

.shop-item,
.service-item,
.activity-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.shop-logo {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 12px;
}

.price {
  color: #ff4d4f;
  font-weight: bold;
}

.status {
  padding: 2px 6px;
  background: #f5f5f5;
  border-radius: 2px;
  font-size: 12px;
  color: #666;
}
.search-results {
  margin-top: 20px;
  background: #fff;
  border-radius: 8px;
  padding: 15px;
}

.results-header {
  margin-bottom: 15px;
}

.results-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.results-tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #eee;
}

.tab-item {
  padding: 8px 0;
  color: #666;
  cursor: pointer;
  position: relative;
}

.tab-item.active {
  color: #ff4d4f;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff4d4f;
}

.count {
  font-size: 12px;
  color: #999;
}

/* 店铺结果样式 */
.shop-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.shop-logo {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-right: 12px;
}

.shop-info h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

/* 服务结果样式 */
.service-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.service-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.service-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.service-info {
  padding: 10px;
}

.service-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.service-shop {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.service-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 活动结果样式 */
.activity-item {
  margin-bottom: 15px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.activity-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.activity-info {
  padding: 12px;
}

.activity-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.activity-shop {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.activity-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.activity-status.ongoing {
  background: #e6f7ff;
  color: #1890ff;
}

.activity-status.upcoming {
  background: #f6ffed;
  color: #52c41a;
}

.activity-status.ended {
  background: #f5f5f5;
  color: #999;
}

.empty-result {
  text-align: center;
  color: #999;
  padding: 30px 0;
}
/* 分类区域并排布局 */
.category-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.category-section {
  flex: 1;
  margin-bottom: 0; /* 覆盖原有的 margin-bottom */
  min-height: 280px; /* 固定高度 */
  display: flex;
  flex-direction: column;
}

.section-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
  padding-left: 8px;
  border-left: 3px solid #ff4d4f;
}

/* 修改分类容器样式 */
.category-container {
  flex: 1;
  overflow-y: auto;
  max-height: none; /* 覆盖原有的 max-height */
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 5px;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: #f8f8f8;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  width: auto; /* 覆盖原有的 width */
  border: 1px solid transparent;
}

.category-item:hover {
  background: #fff;
  border-color: #ffcdd2;
  transform: translateX(5px);
}

.category-item.active {
  background: #fff;
  border-color: #ff4d4f;
  color: #ff4d4f;
  transform: translateX(5px);
}

.category-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  margin: 0 10px 0 0; /* 修改 margin */
}

/* 响应式处理 */
@media screen and (max-width: 768px) {
  .category-row {
    flex-direction: column;
  }

  .category-section {
    min-height: 200px;
  }
}
</style>
